const React = require('react');
const ReactDOM = require('react-dom');
const Component = React.Component;
const Accordion = require('Accordion');
const Button = require('Button');
const Tile = require("./Tile");

class AccordionPage extends Component{
    componentDidMount (){
        for(let i in this.refs){
            let ref = this.refs[i];
            let block = ReactDOM.findDOMNode(ref);
            SyntaxHighlighter.highlight({}, block);
        }
    }


    activeByIndex(){
        this.refs.accordion.activeByIndex(1);
    }

    activeItem(){
        this.refs.accordion.activeItem("sdk");
    }

    render() {
        let selectMenu = function(item){
            console.log(item);
        };
        return (
            <div className="container">
                <Tile header={"使用方式"}>
                    <pre className="brush: js" ref="code">
                        {
`
<Accordion
    data={Object}           //数据源
    style={Object}          //样式
    onSelect={Function}     //选中回调
></Accordion>
`
                        }
                    </pre>
                </Tile>
                <Tile header={"基本使用"}>
                    <div className="mb-30">
                        <Accordion style={{width: '500px'} } ref="accordion" bordered>
                            <Accordion.Item title="Proactive Alerting" icon="square">
                                Nothing is more important than getting timely and actionable data.
                                Same as Crashlytics, we've built a layer of intelligent post-processing
                                to alert you about key events within your app as they happen.
                            </Accordion.Item>
                            <Accordion.Item title="Powerful Developer Account" icon="calendar">
                                With Fabric, you’ll have a single, dedicated developer account with
                                complete access to best-in-class mobile SDKs. Simply add a few lines
                                of code and start coding your app right away. We'll even provision
                                your keys for you.
                            </Accordion.Item>
                            <Accordion.Item identify="sdk" title="整合的移动SDK" icon="th" open>
                                近几年来，移动SDK已呈现出爆炸式增长——每个SDK都致力于解决某个具体的问题。
                                虽然这为开发者提供了更多的解决方案和选择，来应对单个挑战，但是新的问题又
                                出现了:安装和管理门类广泛的SDK，可能是一项既繁琐又复杂的工程。
                            </Accordion.Item>
                            <Accordion.Item title="事件处理与合成事件" icon="ellipsis-h">
                                Autobinding: 在 JavaScript 里创建回调的时候，为了保证 this 的正确性，
                                一般都需要显式地绑定方法到它的实例上。有了 React，所有方法被自动绑定到
                                了它的组件实例上。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。
                                而且还能减少打字！
                            </Accordion.Item>
                        </Accordion>

                        <br/>
                        <Button onClick={this.activeByIndex.bind(this)}>激活第二个</Button>
                        <Button className="ml-10" onClick={this.activeItem.bind(this)}>激活key</Button>
                        <br/>
                        <Accordion style={{width: '500px'} } bordered theme="white">
                            <Accordion.Item title="Proactive Alerting" icon="square">
                                Nothing is more important than getting timely and actionable data.
                                Same as Crashlytics, we've built a layer of intelligent post-processing
                                to alert you about key events within your app as they happen.
                            </Accordion.Item>
                            <Accordion.Item title="Powerful Developer Account" icon="calendar">
                                With Fabric, you’ll have a single, dedicated developer account with
                                complete access to best-in-class mobile SDKs. Simply add a few lines
                                of code and start coding your app right away. We'll even provision
                                your keys for you.
                            </Accordion.Item>
                            <Accordion.Item title="整合的移动SDK" icon="th">
                                近几年来，移动SDK已呈现出爆炸式增长——每个SDK都致力于解决某个具体的问题。
                                虽然这为开发者提供了更多的解决方案和选择，来应对单个挑战，但是新的问题又
                                出现了:安装和管理门类广泛的SDK，可能是一项既繁琐又复杂的工程。
                            </Accordion.Item>
                            <Accordion.Item title="事件处理与合成事件" icon="ellipsis-h">
                                Autobinding: 在 JavaScript 里创建回调的时候，为了保证 this 的正确性，
                                一般都需要显式地绑定方法到它的实例上。有了 React，所有方法被自动绑定到
                                了它的组件实例上。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。
                                而且还能减少打字！
                            </Accordion.Item>
                        </Accordion>
                    </div>
                    <pre className="brush: js" ref="code1">
                        {
`

`
                        }
                    </pre>
                </Tile>
            </div>
        )
    }
}

module.exports = AccordionPage;
